<template>
  <transition name="fade">
    <div class="c-form" v-if="isShowForm">
      <div class="c-form--main">
        <div class="c-form--wrap">
          <div class="header">
            <span class="link" @click="back($event)">
              <i class="link--icon"></i>
            </span>
          </div>
          <div class="form">
            <x-input :onChange="onFirstName" color="#fff" placeholder="First Name"></x-input>
            <x-input :onChange="onLastName" color="#fff" placeholder="Last Name"></x-input>
            <x-input :onChange="onEmail" color="#fff" placeholder="Email"></x-input>
            <div class="select-wrap">
              <select class="select" >
                <option class="option" value="-1">Select your address</option>
              </select>
            </div>
            <div class="upload--wrap">
              <input class="upload__input" type="file">
              <button class="btn btn-white">UPLOAD PHOTO</button>
            </div>
            <div class="upload--wrap">
              <input class="upload__input" type="file">
              <button class="btn btn-white">UPLOAD FILE</button>
            </div>
            <button class="btn btn-red btn-submit">SUBMIT</button>
          </div>
        </div>
        <div class="mask mask__1"></div>
      </div>
    </div>
  </transition>
</template>

<script>
  import XFooter from '@/components/XFooter'
  import XInput from '@/components/XInput'

  export default {
    props: {
      isShowForm: {
        type: Boolean,
        default: false
      },
      callback: {
        type: Function
      }
    },
    components: {
      XFooter,
      XInput
    },
    data() {
      return {
        current: '', // 之前的路由 name
      }
    },
    methods: {
      back(e) {
        this.callback && this.callback()

        // this.current = this.current ? this.current : 'app'
        // this.$router.push({
        //   name: this.current
        // })
      },
      goNav() {
        const route = this.$route
        const current = route.name || 'app'

        this.$router.push({
          name: 'nav',
          params: {
            current
          }
        })
      },
      onFirstName(value) {

      },
      onLastName(value) {

      },
      onEmail(value) {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .select-wrap {
    margin-top: 9px;
    position: relative;
    background: #fff;
    color: #231815;
    &::after {
      display: block;
      content: '\20';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 6px 0 6px;
      border-color: #353038 transparent transparent transparent;

      position: absolute;
      top: 18px;
      right: 10px;
    }
  }
  .select {
    display: block;
    height: 45px;
    width: 100%;
    border: 1px solid #a5a5a5;
    -webkit-appearance: none;
    border-radius: 0;
    background-color: transparent;
    text-indent: 10px;
    &:focus {
      outline: none;
    }
  }
  .form {
    position: relative;
    z-index: 999;

    .btn {
      cursor: pointer;
      display: block;
      width: 100%;
      height: 100%;
      border: 0 none;
      &:focus {
        outline: 0 none;
      }
    }
    .btn-white {
      background: #fff;
      color: #800000;
      font-size: 16px;
      margin-top: 9px;
    }
    .btn-red {
      color: #fff;
      background: #800000;
    }
    .btn-submit {
      margin-top: 40px;
      height: 52px;
      font-size: 27px;
    }
    .upload--wrap {
      position: relative;
      width: 100%;
      height: 54px;
      .upload__input {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }

  .c-form--wrap {
    width: 410px;
    margin: 0 auto;
    padding-top: 100px;
    .header {
      height: 78px;
      position: relative;
      z-index: 999;
      .link {
        cursor: pointer;
        display: block;
        width: 32px;
        height: 32px;
        border: 1px #fff solid;
        position: absolute;
        top: 0;
        right: 0;
      }
      .link--icon {
        position: absolute;
        top: 3px;
        left: 4px;
        display: block;
        width: 23px;
        height: 23px;
        background: url("../assets/form_close.png") 0 0 no-repeat;
      }
    }
  }

  .fade-enter-active,
  .fade-leave {
    opacity: 1;
    transition: opacity .5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
    transition: opacity .3s;
  }

  .x-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    border-top: 4px solid maroon;
  }

  .x-header--wrap {
    max-width: 1920px;
    margin: 0 auto;
    padding: 15px 30px;
  }

  /* logo */
  .x-logo {
    float: left;
  }

  .x-menu {
    float: right;
    line-height: 32px;
  }

  .menu-icon--link {
    cursor: pointer;
    display: block;
    width: 26px;
    height: 26px;
    box-sizing: border-box;

    position: relative;
  }
  .menu-icon {
    display: block;
    width: 28px;
    height: 19px;
    background: url("../assets/menu.png") -28px 0 no-repeat;

    position: absolute;
    top: 5px;
    left: 0;
  }

  .c-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }

  .c-form--main {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .mask__1 {
    background: rgba(41, 46, 60, .8);
  }
</style>
